import React, { useState, useEffect } from "react";
import "./index.css"

const Clock = () => {
    const [tick, setTick] = useState(0);
    useEffect(() => {
        const timer = setTimeout(() => {
            setTick(tick + 1);
        }, 1000)
        return () => {
            clearInterval(timer)
        }
    }, [tick])
}

const useData = () => {
    const data = new Date();
    const hours = data.getHours()
    const minutes = data.getMinutes();
    const seconds = data.getSeconds();
    //秒针，360度分60分乘以当前秒数，加上180的偏移
    const pointseconds = ((360 / 60) * seconds) + 180;
    //分针，360度分60分乘以当前分数，加上180的偏移，加上秒针偏移，一分钟占360/60度,分60份乘以当前秒数
    const pointminutes = ((360 / 60) * minutes) + 180 + ((360 / 60) / 60) * seconds;
    //时针，360度分12分乘以当前时间，加上180偏移，加上分针偏移，一小时占360/12度，分60份乘以当前分钟
    const pointhours = ((360 / 12) * hours) + 180 + ((360 / 12) / 60) * minutes;

    return [pointseconds, pointminutes, pointhours, seconds, minutes, hours];
}

function Practice() {
    Clock();
    const [pointseconds, pointminutes, pointhours, seconds, minutes, hours] = useData();

    return (
        <div className="clock">
            <div className="clock-bp">
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
                <div ></div>
            </div>
            <div>
                <div className="clock-point-hours" style={{ transform: `translate(-50%,0) rotate(${pointhours}deg)` }}></div>
                <div className="clock-point-minutes" style={{ transform: `translate(-50%,0) rotate(${pointminutes}deg)` }}></div>
                <div className="clock-point-seconds" style={{ transform: `translate(-50%,0) rotate(${pointseconds}deg)` }}></div>
                <div className="clock-dot"></div>
            </div>
            <div className="clock-number">{hours>9?hours:"0"+hours}:{minutes>9?minutes:"0"+minutes}:{seconds>9?seconds:"0"+seconds}
            </div>
        </div>
    )
}
export default Practice;